<template>
  <div>
    <h3>文章评论</h3>
    <section class="container">
      <div
        v-quill:myQuillEditor="editorOption"
        class="quill-editor"
        :content="content"
        @change="onEditorChange($event)"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
      ></div>
    </section>
    <div class="addblogDiscss">
      <a-button
        type="primary"
        :disabled="disabled"
        :loading="loading"
        @click="sendView"
      >
        评论
      </a-button>
    </div>
  </div>
</template>

<script>
import { updateFile, discussAdd } from '../api/api'
export default {
  data() {
    const This = this
    return {
      loading: false,
      disabled: true,
      content: ``,
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              ['blockquote', 'code-block'],
              ['link', 'image'],

              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
              [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
              [{ direction: 'rtl' }], // text direction

              [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
              [{ header: [1, 2, 3, 4, 5, 6, false] }],

              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],

              ['clean'], // remove formatting button
            ],
            handlers: {
              image(value, a, b, c) {
                const input = document.createElement('input')
                input.type = 'file'
                input.name = '文件上传'
                input.accept = 'image/jpeg,image/png,image/jpg,image/gif'
                input.onchange = (e) => {
                  const fileInput = e.target // 获取元素
                  const data = new FormData() // 创建表单
                  data.append('file', fileInput.files[0]) // 添加数据到表单
                  updateFile(data).then((res) => {
                    This.content += `<img src="${res.accessPath}" alt="内容图片">`
                  })
                }
                input.click()
                // this.quill.format('image', false) // 禁用quill内部上传图片方法
                // this.imgHandler(this)
              },
            },
          },
        },
      },
      quill: '',
      update() {},
    }
  },

  methods: {
    onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange({ editor, html, text }) {
      console.log('editor change!', editor, html, text)
      this.content = html
      this.disabled = this.content.length > 10 ? false : true;
    },

    imgHandler(handle) {
      this.quill = handle.quill
      console.log('**--**', handle)
      // var inputfile = document.getElementById('file')
      // inputfile.click()
    },
    async sendView() {
      this.loading = true
      const res = await discussAdd({
        txt: this.content,
        blogid: this.$route.query.id,
      })
      if (res) {
        this.loading = false
        this.$message.success('评论成功')
      }
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  // width: 60%;
  margin: 0 auto;
  padding: 50px 0;
  .quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }
}
.addblogDiscss {
  width: 100%;
  text-align: center;
}
</style>